;$(function () {
    layui.use(['form', 'table'], function () {
        let form = layui.form,
            table = layui.table;
        let xmselect;
        table.render({
            elem: '#staffInfoTable'
            , url: "getStaffInfo"
            , method: "post"
            , response: {
                statusCode: true
            }
            , defaultToolbar: []
            , cellMinWidth: 80
            , cols: [[
                {field: 'sorts', title: '序号', templet: '#sort', width: 58, align: 'center'}
                , {field: 'accountNumber', title: '账号', align: 'center',}
                , {field: 'name', title: '用户名', align: 'center'}
                , {field: 'sex', title: '性别', width: 80, align: 'center'}
                , {field: 'phone', title: '联系方式', align: 'center'}
                , {field: 'addTime', title: '添加时间', align: 'center', sort: true}
                , {field: 'role', title: '角色', align: 'center'}
                , {filed: 'status', title: '账户状态', templet: '#statusTemp', width: 100, align: "center"}
                , {
                    field: 'tool', title: '操作', align: 'center', width: 150,
                    templet: function (d) {
                        return '<span style="text-decoration:underline;cursor:pointer;color:#4BB2FF" lay-event="staffUpdate">编辑</span>'
                            + '<span style="margin-left:10px;text-decoration:underline;cursor:pointer;color:#D92E2E" lay-event="staffDelete">删除</span>'
                    }
                }
            ]],
            id: "staffInfoRender"
            , page: true
        });
        table.on('tool(staffInfoTable)', function (obj) {
            var tableData = obj.data;
            if (obj.event === 'staffUpdate') {
                layer.open({
                    type: 1,
                    title: "编辑信息",
                    skin: 'layui-layer-rim',//加边框
                    area: ['400px', '480px'],
                    content: $("#stuffExtra"),//注意放在<body>最外层
                    btn: ['确认', '取消'],
                    success: function (index, layero) {
                        $("#stuffExtra").removeClass("layui-hide");
                        $('#staffInfoForm')[0].reset();
                        form.val("staffInfoForm", {
                            "name": tableData.name
                            , "accountNumber": tableData.accountNumber
                            , "sex": tableData.sex
                            , "phone": tableData.phone
                        });
                        form.render();
                        $.ajax({
                            type: 'POST',
                            url: 'getUserRole',
                            dataType: 'JSON',
                            data: {"id": tableData.id},
                            async: false,
                            error: function (data) {
                                layer.msg('稍后再试！');
                            },
                            success: function (data) {
                                if (data.code === true) {
                                    xmselect = xmSelect.render({
                                        el: '#stuffRole',
                                        direction: 'up',
                                        height: 'auto',
                                        style: {
                                            width: '188px'
                                        },
                                        autoRow: true,
                                        data: data.data
                                    });
                                } else {
                                    layer.msg(data.msg);
                                }
                            },
                        });
                    },
                    yes: function (index, layero) {
                        form.on('submit(staffInfoForm)', function (data) {
                            $("#staffInfoForm").ajaxSubmit({
                                type: 'POST',
                                async: false,
                                url: "editStuff",
                                dataType: 'json',
                                data: {"id": tableData.id},
                                success: function (data) {
                                    if (data.code === true) {
                                        layer.close(index);
                                        layer.msg('修改成功！');
                                        table.reload('staffInfoRender');
                                    } else {
                                        layer.msg(data.msg);
                                    }
                                },
                                error: function (data) {
                                    layer.msg('请稍后再试！');
                                },
                            });
                            return false;
                        });
                        $("#staffInfoForm").submit();
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    },
                    end: function () {
                        $("#stuffExtra").addClass("layui-hide");
                    }
                });
            }
            if (obj.event === 'staffDelete') {
                layer.confirm('真的要删除吗？', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: 'deleteStaff',
                        async: false,
                        data: {"id": tableData.id},
                        dataType: 'JSON',
                        error: function (data) {
                            layer.msg('稍后再试！');
                        },
                        success: function (data) {
                            if (data.code == true) {
                                layer.msg('操作成功！');
                            } else {
                                layer.msg(data.msg);
                            }
                        },
                    });
                    layer.close(index);
                    table.reload('staffInfoRender', {
                        page: {
                            curr: 1
                        }
                    });
                });
            }
        });
        form.on('switch(status)', function (data) {
// 得到开关的value值，实际是需要修改的ID值。
            var id = data.value;
            var obj = $(data.elem);
            var status = this.checked ? '1' : '0';
            var index;
            $.ajax({
                type: 'POST',
                url: 'changeAccountStatus',
                data: {"id": id, "status": status},
                dataType: 'JSON',
                beforeSend: function () {
                    index = layer.msg('正在切换中，请稍候', {icon: 16, time: false, shade: 0.8});
                },
                error: function (data) {
                    layer.msg('数据异常，操作失败！');
                },
                success: function (data) {
                    if (data.code === true) {
                        setTimeout(function () {
                            layer.close(index);
                            layer.msg('切换成功！'  );
                        }, 500);
                    } else {
                        obj.prop('checked',!obj.checked);
                        layer.msg(data.msg);
                        layui.form.render();
                    }
                },
            });
        });
        form.on('select(stuffSearchSelect)', function (data) {
            let stuffSearchName = $("#stuffSearchInput").val();
            let stuffSearchRoleId = $("#stuffSearchSelect").val();
            table.reload('staffInfoRender', {
                where: {
                    "stuffSearchName": stuffSearchName,
                    "stuffSearchRoleId": stuffSearchRoleId
                }
                , page: {
                    curr: 1
                }
            });
        });
        $("#stuffSearchBtn").click(function (obj) {
            layui.event.call(obj, 'form', 'select(stuffSearchSelect)', obj);
        });
        $("#stuffInsertButton").click(function (obj) {
            layer.open({
                type: 1,
                title: "添加员工",
                skin: 'layui-layer-rim',//加边框
                area: ['400px', '480px'],
                content: $("#stuffExtra"),//注意放在<body>最外层
                btn: ['确认', '取消'],
                success: function (index, layero) {
                    $("#stuffExtra").removeClass("layui-hide");
                    $('#staffInfoForm')[0].reset();
                    $.ajax({
                        type: 'POST',
                        url: 'listRoles',
                        dataType: 'JSON',
                        async: false,
                        error: function (data) {
                            layer.msg('稍后再试！');
                        },
                        success: function (data) {
                            if (data.code == true) {
                                xmselect = xmSelect.render({
                                    el: '#stuffRole',
                                    direction: 'up',
                                    height: 'auto',
                                    style: {
                                        width: '188px'
                                    },
                                    autoRow: true,
                                    data: data.data
                                });
                                // xmselect.update({
                                //     data: data.data,
                                // });
                            } else {
                                layer.msg(data.msg);
                            }
                        },
                    });
                },
                yes: function (index, layero) {
                    form.on('submit(staffInfoForm)', function (data) {
                        $("#staffInfoForm").ajaxSubmit({
                            type: 'POST',
                            async: false,
                            url: "insertStaff",
                            dataType: 'json',
                            success: function (data) {
                                if (data.code == true) {
                                    layer.close(index);
                                    layer.msg('创建成功！');
                                    table.reload('staffInfoRender');
                                } else {
                                    layer.msg(data.msg);
                                }
                            },
                            error: function (data) {
                                layer.msg('请稍后再试！');
                            },
                        });
                        return false;
                    });
                    $("#staffInfoForm").submit();
                },
                btn2: function (index, layero) {
                    layer.close(index);
                },
                end: function () {
                    $("#stuffExtra").addClass("layui-hide");
                }
            });
        });
    });
});